<extend name="Public/base"/>

<block name="body">
	<link href="__STATIC__/bootstrap/css/bootstrap.css" rel="stylesheet">
	<link href="__STATIC__/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet">
	<link href="__STATIC__/tag-input/jquery.tagsinput.css" rel="stylesheet">
	<script src="__STATIC__/bootstrap-fileinput/js/plugins/piexif.min.js" type="text/javascript"></script>
    <script src="__STATIC__/bootstrap-fileinput/js/plugins/sortable.min.js" type="text/javascript"></script>
    <script src="__STATIC__/bootstrap-fileinput/js/plugins/purify.min.js" type="text/javascript"></script>
    <script src="__STATIC__/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
    <script src="__STATIC__/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
    <script src="__STATIC__/tag-input/jquery.tagsinput.js" type="text/javascript"></script>
    
    <div class="container-fluid">
    <div class="row">
    	<div class="col-sm-4">
        	<h4>{$meta_title}</h4>
        </div>
    </div>
    
    <form action="{:U('')}" role="form" method="post"  class="form-horizontal">
    	<div class="form-group">
	    	<label class="control-label col-sm-1 ">名称</label>
	    	<div class="col-sm-3">
		          <input type="text" class="form-control muted" name="name" value="{$data.name}">
	    	</div>
	    </div>
	    <div class="form-group">
	    	<label class="control-label col-sm-1 ">是否公开</label>
	    	<div class="col-sm-3 radio">
				<label>
					<if condition="$data['is_private'] eq 0">
						<input type="radio" name="is_private"  value="0" checked >公开
					<else/>
						<input type="radio" name="is_private"  value="0">公开
					</if>
				</label>
				<label>
					<if condition="$data['is_private'] eq 1">
						<input type="radio" name="is_private"  value="1" checked >私有
					<else/>
						<input type="radio" name="is_private"  value="1">私有
					</if>
				</label>
	    	</div>
	    </div>
	    
        <div class="form-group">
            <label class="control-label col-sm-1">图片</label>
            <div class="col-sm-9">
            	<input type="file" name="images" id="images" value=""  multiple class="file-loading col-sm-3" >
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-1">标签</label>
            <div class="col-sm-3">
            	<input type="text" class="form-control" name="tags" id="tags" value="{$data.tags}" >
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-1">描述</label>
            <div class="col-sm-4">
            	<textarea type="text" class="form-control" name="desc" rows="10">{$data.desc}</textarea>
            </div>
        </div>
        <div class="form-group">
	        <div class="col-sm-offset-1 col-sm-4">
	        	<input type="hidden" name="id" value="{$data.id}"/>
	            <button class="btn submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal">确 定</button>
	            <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
	        </div>
        </div>
 	</form>
</block>


<block name="script">
    <script type="text/javascript">
        //导航高亮
        highlight_subnav('{:U('Score/index')}');
        
        $(function(){
        	$('#tags').tagsInput();
        	
        	var initialPreview = new Array();
        	var initialPreviewConfig = new Array();
	       	$.ajax({  
                 url: '{:U('Score/getImages')}',  
                 type: 'GET',  
                 dataType: 'json', 
                 data: 'score_id={$data.id}',
                 timeout: 1000,  
                 cache: false,  
                 async: false,
                 error: function(data){
                	 
                 },  //错误执行方法    
                 success: function(data){
                	 console.log(data);
               	  if(data.info) {
               		if(data.info.initialPreview != null)initialPreview = data.info.initialPreview;
               		if(data.info.initialPreviewConfig != null)initialPreviewConfig = data.info.initialPreviewConfig;
               	  }
                 } //成功执行方法    
              });  
        	
        	
        	var $input = $("#images");
        	
        	var footerTemplate = '<div class="file-thumbnail-footer" style ="height:94px">\n' +
        	'   <div style="margin:5px 0">\n' +
        	'       <input class="kv-input kv-new form-control input-sm text-center {TAG_CSS_NEW}" value="{caption}" placeholder="Enter caption...">\n' +
        	'       <input class="kv-input kv-init form-control input-sm text-center {TAG_CSS_INIT}" value="{TAG_VALUE}" placeholder="Enter caption...">\n' +
        	'   </div>\n' +
        	'   {size} {progress} {actions}\n' +
        	'</div>';
        	
        	$input.fileinput({
     
                uploadAsync:true,
                uploadUrl:"{:U('Oss/uploadFiles')}",
                maxFileCount: 5,
                overwriteInitial:false,
                showUpload:false,
                showRemove:true,
                //layoutTemplates: {footer: footerTemplate},
                previewThumbTags: {
                    '{TAG_VALUE}': '',        // no value
                    '{TAG_CSS_NEW}': '',      // new thumbnail input
                    '{TAG_CSS_INIT}': 'hide'  // hide the initial input
                },
                uploadExtraData: function() {  // callback example
                    var out = {}, key, i = 0;
                
                    $('.kv-input:visible').each(function() {
                        $el = $(this);
                        key = $el.hasClass('kv-new') ? 'new_' + i : 'init_' + i;
                        out[key] = $el.val();
                        console.log(key);
                        i++;
                    });
                    return out;
                },
                initialPreview: initialPreview,
                initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
                initialPreviewFileType: 'image', // image is the default and can be overridden in config below
                initialPreviewConfig: initialPreviewConfig
                
            }).on("filebatchselected", function(event, files) {
                // trigger upload method immediately after files are selected
                $input.fileinput("upload");
            }).on('fileuploaded', function(event, data, previewId, index) {
            	console.log("fileuploaded:"+previewId);
	            if(data.response) {
            		$("#"+previewId).append('<input type="hidden" name="image_urls[]" image_url= "'+data.response.info.img_url+'" value="'+data.response.info.img_url+'" >');
            	}
	        }).on("filebatchuploadsuccess", function(event, data, previewId, index) {
            	console.log("filebatchuploadsuccess");
            	
            });
        	
        	//console.log($input.fileinput('getFrames', '.file-preview-initial'));
        	
        	if(initialPreviewConfig != null && initialPreviewConfig.length > 0) {
        		for(var i = 0; i < initialPreviewConfig.length; i++) {
        			$fistPreview = $input.fileinput('getFrames', '.file-preview-initial').first();
        			$fistPreview.append("<input type='hidden' name='image_ids[]' image_id= '"+initialPreviewConfig[i]['key']+"' value='"+initialPreviewConfig[i]['key']+"' >");
        			console.log($fistPreview);
        		}
        		
        	}
        })
    </script>
</block>
